@function getRemNum($rem) {
  @return ($rem /37.5)
}

header {
  width: getRemNum(315rem);
  height: getRemNum(147rem);
  margin: getRemNum(24rem) auto 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .back {
    width: getRemNum(20rem);
    height: getRemNum(13rem);
    font-size: getRemNum(20rem);
    line-height: getRemNum(13rem);
    font-weight: 700;
    color: #999;
    font-family: PingFangSC-Medium, PingFang SC;
  }

  & > section:nth-child(2) {
    font-size: getRemNum(42rem);
    color: #757575;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    margin-top: getRemNum(12rem);
  }

  & > section:nth-child(3) {
    font-size: getRemNum(20rem);
    color: #999999;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
  }

  & > section:nth-child(4) {
    font-size: getRemNum(22rem);
    color: #757575;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
  }
}

.container {
  height: getRemNum(361rem);
  width: getRemNum(315rem);
  margin: getRemNum(36rem) auto 0;

  & > section {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: getRemNum(44rem);
    font-size: getRemNum(14rem);

    input::-webkit-input-placeholder {
      color: #D8D8D8;
      letter-spacing: getRemNum(0.6rem);
    }
  }

  & > section section:nth-child(1) {
    width: getRemNum(38rem);
    height: getRemNum(48rem);
    background-size: contain !important;
  }

  & > section section:nth-child(2):not(.verification-code-input) {
    width: getRemNum(259rem);
    height: getRemNum(52rem);

    input {
      font-family: PingFangSC-Regular, PingFang SC;
      height: getRemNum(52rem);
      width: getRemNum(259rem);
      color: #757575;
      outline: none;
      border: {
        top: none;
        left: none;
        right: none;
        bottom: rgba(0, 0, 0, 0.05) solid getRemNum(2rem);
      }
    }
  }

  .verification-code-input {
    width: getRemNum(259rem);
    height: getRemNum(52rem);

    input {
      text-align: center;
      font-family: PingFangSC-Regular, PingFang SC;
      height: getRemNum(52rem);
      width: getRemNum(60rem);
      color: #757575;
      outline: none;
      border: {
        top: none;
        left: none;
        right: none;
        bottom: rgba(0, 0, 0, 0.05) solid getRemNum(2rem);
      }
    }
  }

  .phone-number {
    position: relative;
  }

  .phone-number-tip {
    position: absolute;
    background: linear-gradient(135deg, #4279FD 0%, #89B1FF 100%);
    width: getRemNum(78rem);
    height: getRemNum(44rem);
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    border-radius: getRemNum(12rem);
    color: #fff;
    font-family: PingFangSC-Medium, PingFang SC;
    text-align: center;
    line-height: getRemNum(44rem);
    font-size: getRemNum(12rem);
  }

  & > section:nth-child(1) section:nth-child(1) {
    background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/Phone%403x.png") no-repeat;
  }

  & > section:nth-child(2) section:nth-child(1), & > section:nth-child(3) section:nth-child(1), & > section:nth-child(4) section:nth-child(1) {
    background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/password%403x.png") no-repeat;
  }

}

footer {
  height: getRemNum(154rem);
  width: getRemNum(315rem);
  margin: getRemNum(45rem) auto getRemNum(57rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .submit-button {
    width: getRemNum(315rem);
    height: getRemNum(58rem);

    input {
      width: getRemNum(315rem);
      height: getRemNum(58rem);
      background: linear-gradient(135deg, #4279FD 0%, #89B1FF 100%);
      box-shadow: 0 getRemNum(5rem) getRemNum(12rem) 0 rgba(0, 0, 0, 0.08);
      border-radius: getRemNum(12rem);
      border: none;
      color: #fff;
      font-size: getRemNum(16rem);
      font-family: PingFangSC-Medium, PingFang SC;
    }
  }
}

